<template>
  <div>
    <!-- 导航列表 -->
    <div class="nav" style="background:none">

      <van-tabs color="#3399ff" v-model="active" @click="opens">
        <router-link to="detail">
          <van-tab v-for="item in listo" :title="item.name" :key="item.id" :name="item._id"
            @click="contents(item.cate_id)"></van-tab>
        </router-link>
      </van-tabs>
    </div>

    <!-- 列表信息 -->

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" :head-height="80" style="margin:auto" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img class="doge" src="../../../public/img/kn.gif" :style="{ transform: `scale(${props.distance / 80})` }" />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="../../../public/img/kn.gif" />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="../../../public/img/kn.gif" />
      </template>

      <!-- 上拉加载 -->
      <van-list v-model="loading" :finished="finished" finished-text="家人，已经到底了" @load="onLoad">

        <div class="content">
          <van-row style="margin-top:20px;border-bottom:2px black solid;padding-bottom: 15px;" v-for="ios in list"
            :key="ios._id" @click="$router.push({
              path: '/detail',
              query: {
                id: ios._id,
                title: ios.title
              }
            })">

            <van-col span="24" class="clo111">
              <p>
                {{ ios.title }}</p>
            </van-col>
            <!-- 图片 -->
            <div :class="{
              none: ios.imageSrc.length == 0,
              nones: ios.imageSrc.length == 1,
              more: ios.imageSrc.length == 2,
              mores: ios.imageSrc.length == 3
            }">
              <img v-for="(ios, index) in ios.imageSrc" :key="index" v-lazy="ios">
            </div>
            <!-- 信息 -->
            <div style="margin-left:5%">
              <van-col span="12" class="col333" style="color:gray">作者：{{ ios.author }}</van-col>
              <van-col span="10" class="col333" style="color:gray">时间：{{ ios.time | formatDate }}</van-col>
            </div>
          </van-row>
          <!-- <div style="border-bottom:2px black dotted;: 10px;"></div> -->
        </div>



      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
// 上拉加载
import { List, PullRefresh, Toast } from 'vant';

export default {
  data() {
    return {
      listo: [],
      // listss: [],
      id: '',
      active: 0,
      times: '',
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      names: ''
    };
  },
  // 时间戳转换年月日
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    }
  },
  methods: {
    // 请求文章列表
    opens(name) {
      this.$http
        .post("/api/get_article_list", {
          cate_id: name,
          skip: 0,
          limit: '10000'
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.names = name;
          this.id = res.data.data[0]._id;
        })
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        // this.list =[];
        this.$http
          .post("/api/get_article_list", {
            cate_id: this.names,
            skip: 0,
            limit: '10000'
          }).then(res => {
            if (res.data.code == 0) {
              this.list = [];
              this.list = res.data.data
            }
          })
      }, 1000);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
  },
  created() {
    // 请求 分类
    this.$http
      .post("/api/get_cate_list")
      .then((res) => {
        this.listo = res.data.data;
        const aaa = res.data.data[0]._id
        this.opens(aaa)
      })
  },
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  }
}
</script>

<style scoped lang="less">
// 图片样式

.doge {
  float: none;
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}

.van-col {
  box-sizing: border-box;
  min-height: 1px;
  overflow: hidden;
  word-wrap: break-word;
  display: flex;
  margin: 15px 0 10px 0;
}


::v-deep .van-tabs__line {
  position: absolute;
  bottom: 6.5vw;
  left: 0;
  z-index: 1;
  width: 4.66667vw;
  height: 0.8vw;
  border-radius: 0.8vw;
  color: #3399ff
}

// 图片
.content {
  overflow: hidden;

  p {
    padding-bottom: 10px;
    text-indent: 1.5em;
    line-height: 1.5em;
    font-size: 17px;
  }

  img {
    max-width: 100%;
  }

  .none img {
    display: none;
  }

  .nones {
    width: 100%;
  }

  .nones img {
    width: 100%;
    height: 230px;
  }

  .more img {
    width: 47%;
    height: 150px;
    padding-left: 10px;
    margin-top: 10px;
  }

  .mores img {
    width: 32%;
    padding-left: 4px;
    height: 100px;
  }
}
</style>